import * as React from 'react'
import { Switch, useHistory, Route, Redirect } from 'react-router-dom'
import { Menu, Layout, Avatar, Dropdown, message } from 'antd'
import { TeamOutlined, SolutionOutlined, QqOutlined, MailOutlined } from '@ant-design/icons'
import style from './style.module.css'
import Company from '../Company'
import Recruit from '../Recruit'
import User from '../User'
import Apply from '../Apply'
import CompanyUser from '../CompanyUser'
import CompanyView from '../CompanyView'
import RecruitView from '../RecruitView'
import * as api from '../../services/api'
import { IUser, SkuStatus, UserRole } from '../../types'

export default function Home(): JSX.Element {
  const [user, setUser] = React.useState<IUser>()
  const history = useHistory()
  const prefix = '/home'
  const logout = async () => {
    await api.logout()
    message.success('已退出登录')
    history.push('/login')
  }
  React.useEffect(() => {
    const userInfo = async () => {
      const result = await api.userInfo()
      if (result.stat === 'OK') {
        setUser(result.data)
        if (result.data.isDisabled === SkuStatus.Offline) {
          message.warning('您的账号已被禁用,请联系系统管理员！将在3秒后退出！')
          setTimeout(async () => {
            await api.logout()
            history.push('/login')
          }, 3000)
        }
      } else {
        message.warning('请先登录')
        history.push('/login')
      }
    }
    userInfo()
  }, [history])
  if (user === undefined) return (<></>)
  return (
    <Layout className={style.layout}>
      <Layout.Header className={style.header}>
        <div className={style.brand}>控制台</div>
        <span className={style.username}>{user?.name}</span>
        <Dropdown
          arrow
          placement="bottomCenter"
          overlay={
            <Menu>
              <Menu.Item key="logout" onClick={() => logout()}>
                退出登录
              </Menu.Item>
            </Menu>
          }
        >
          <Avatar src={user?.avatar} className={style.avatar} />
        </Dropdown>
      </Layout.Header>
      <Layout>
        <Layout.Sider width={150}>
          <Menu
            theme="dark"
            onSelect={item => {
              history.push(item.key)
            }}
            selectedKeys={[prefix]}
          >
            {user?.role !== UserRole.Super &&
              <Menu.Item icon={<QqOutlined />} key={`${prefix}/company`}>
                我的企业
              </Menu.Item>}
            {user?.role !== UserRole.Super &&
              <Menu.Item icon={<SolutionOutlined />}
                key={`${prefix}/${user?._id}/recruit`} >
                我的职位
              </Menu.Item>}
            {user?.role === UserRole.Super &&
              <Menu.Item icon={<TeamOutlined />} key={`${prefix}/user`} disabled={user?.role !== UserRole.Super}>
                用户管理
              </Menu.Item>}
            {user?.role === UserRole.Super &&
              <Menu.Item icon={<MailOutlined />} key={`${prefix}/apply`} disabled={user?.role !== UserRole.Super}>
                企业管理
              </Menu.Item>}
          </Menu>
        </Layout.Sider>
        <Layout.Content className={style.content}>
          <Switch>
            <Route path={`${prefix}/company`} exact component={Company} />
            <Route path={`${prefix}/:id/recruit`} exact component={Recruit} />
            {user?.role === UserRole.Super && <Route path={`${prefix}/user`} exact component={User} />}
            {user?.role === UserRole.Super && <Route path={`${prefix}/apply`} exact component={Apply} />}
            <Route path={`${prefix}/company/:id/user`} component={CompanyUser} />
            <Route path={`${prefix}/company/view/:id`} component={CompanyView} />
            <Route path={`${prefix}/user`} component={CompanyUser} />
            <Route path={`${prefix}/${user?._id}/recruit/view/:id`} component={RecruitView} />
            {user?.role === UserRole.Super && <Redirect from={`${prefix}`} to={`${prefix}/user`} exact />}
            {user?.role !== UserRole.Super && <Redirect from={`${prefix}`} to={`${prefix}/company`} exact />}
          </Switch>
        </Layout.Content>
      </Layout>
    </Layout>
  )
}
